<template>
  <div>
    <h1>Directive函数简写</h1>
    <p>
      使用场景 mounted 和 updated
      时触发相同行为，而不关心其他的钩子函数。那么你可以通过将这个函数模式实现
    </p>
    <input type="text" v-model="color" />
    <Move v-move="{ background: color }"></Move>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, Directive, DirectiveBinding } from "vue";
import Move from "./move.vue";
let color = ref("red");
const vMove: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
  el.style.background = binding.value.background;
};
</script>
<style lang="less" scoped></style>
